<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
      margin: 0;
      padding: 0;
    }

  
  
    .wai {
      width: 500px;
      position: relative;
      display: flex;
      border: 2px solid #E3E3E3;
      margin-top: 30px;
      border-radius: 5px;
    }

    .wai span {
      display: block;
      width: 100px;
      background-color: gray;
      text-align: center;
      line-height: 36px
    }
    h1 > span{
      font-size: 20px;
      color: gray;
    }
    h1{
        width: 500px;
        line-height: 60px;
        border-bottom: 1px solid gray;
    } 
    .wai > input {
        flex: 1;
        border: 0;
        outline: none;
    }
    button{
        margin-top: 30px;
        width: 100px;
        margin-right: 30px;
    }
    .but{
        display: flex;
    }
    table{
        width: 800px;
    }
  </style>
<body>
    <h1>表单<span>Subtext for header</span></h1>
    <form action="">
        <div class="wai">
          <span>姓名</span><input type="text" class="xm" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间">
        </div>
        <div class="wai lianx">
            <span>联系电话</span><input type="text" class="lx" placeholder="1fdslfsd如果格式有错误输入框变红提示">
        </div>
        <div class="wai xueli">
            <span>学历</span><input type="text" class="xl" placeholder="如果校验正确，绿色表示通过">
        </div>
        <div class="wai">
            <span>年龄</span><input type="text" class="nl" placeholder="Amount">
        </div>
        <div class="wai">
            <span>期望薪资</span><input type="text" class="xz"  placeholder="Amount">
        </div>
        
    </form>
    <div class="but"><button class="btn">保存</button> <button>重置</button></div>
    <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>联系电话</th>
                        <th>学历</th>
                        <th>年龄</th>
                        <th>期望薪资</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
    </table>
    <script src="./jquery/jquery.js"></script>
    <script src="./jquery/jquery.min.js"></script>
    <script>
          // 1. 定义正则
    // var regObj = {
    //   username: /^[0-9a-z]\w{5,11}$/i,
    //   password: /^\w{6,12}$/,
    //   phone: /^\d{11}$/
    // }
    //2. 拿到所有的 文本框
    var inps = document.querySelectorAll('form input');
    var lianx = document.querySelector(".lianx");
    var xueli = document.querySelector(".xueli");
    var btn = document.querySelector(".btn");

    inps[1].oninput = function () {
      var text = this.value;
    //   console.log(text);
      var reg = /^\d{11}$/
    //   console.log(reg);
      lianx.style.borderColor = reg.test(text) ?  "" : "red"
    }
    
    inps[2].oninput = function () {
      var text = this.value;
    //   console.log(text);
      if(text !== "专科" || text !== "本科" || text !== "未毕业" ){
          xueli.style.borderColor = "green"
      }
      
    }
    
    $('.btn').click(function(){
    let str = ``;
    let name = $('.xl').val();
    let phone = $('.lx').val();
    let education = $('.xl').val();
    let age = $('.nl').val();
    let money = $('.xz').val();
    let sbj =[];
    str +=`
    <tr>
    <td>${name}</td>
    <td>${phone}</td>
    <td>${education}</td>
    <td>${age}</td>
    <td>${money}</td>
    <td>
        <button>修改</button>
        <button class ="shanchu">删除</button>
    </td>
    </tr>
    `;
    sbj.push(str);
    sbj.forEach(function(item){  
        $('tbody').append(item);
    })
})
    function s(){
        
            $(".shanchu".on("click",function(){
                console.log(this);
            }))
       
    }
    s();
    </script>
</body>
</html>